<template>
  <div>
    <el-input v-model="articlename" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="articleName()">搜索</el-button>
    <el-container
      class="el_container"
      v-for="info1 in info"
      :key="info1.articleid"
    >
      <el-card class="box-card">
        <div class="text item">
          <router-link
            class="a_style"
            :to="'queryOneArticle/' + info1.articleid"
          >
            <el-header class="title" >{{ info1.articletitle }}</el-header>
            <el-main class="container_index" v-if="info1">{{
              info1.articlecontent.length > 20
                ? info1.articlecontent.substr(0, 500) + "..."
                : info1.articlecontent
            }}</el-main>
          </router-link>
        </div>
      </el-card>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "QueryAllArticle",
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.qaueryAllArticle();
    });
  },
  data() {
    return {
      articlename: "",
      info: {
        articleid: "",
        articletitle: "",
        articlecontent: "",
        articleauthor: "",
        articledate: "",
        articleclassification: "",
        articlebrowse: "",
        articlefabulous: "",
        articlecomment: "",
        articlecollection: "",
      },
    };
  },
  methods: {
    qaueryAllArticle() {
      let that = this;
      this.axios({
        // xhrFields: {
        //   withCredentials: true,
        // },
        method: "get",
        headers: {
          Authorization: window.sessionStorage.getItem("userLogin"),
        },
        url: this.$constant.url + "/article/queryAllArticle",
      }).then(({ data }) => {
        console.log(data);
        if (data.code == 100) {
          this.info = data.data;
        } else if (data.code == -1) {
          alert("请重新登录");
        }
      });
    },
    articleName() {
      let that = this;
      this.axios({
        method: "post",
        headers: {
          Authorization: window.sessionStorage.getItem("userLogin"),
        },
        url: this.$constant.url + "/article/queryOneArticlename/",
        data: { articletitle: this.articlename },
      }).then(({ data }) => {
        console.log(data);
        if (data.code == 100) {
          this.info = data.data;
        } else if (data.code == -1) {
          alert("请重新登录");
        }
      });
    },
  },
};
</script>

<style>
.el_container {
  margin-bottom: 4%;
}
.title {
  text-align: center;
  font-size: 32px;
}
.container_index {
  text-indent: 2em;
}
.box-card {
  width: 100%;
}
.a_style {
  text-decoration: none;
}
</style>
